import {PageContainer} from '@ant-design/pro-components';
import {useModel} from '@umijs/max';
import {Card, theme} from 'antd';
import React from 'react';

const Welcome: React.FC = () => {
  const {token} = theme.useToken();
  const {initialState} = useModel('@@initialState');
  return (
    <PageContainer>
      <Card
        style={{
          borderRadius: 8,
        }}
        bodyStyle={{
          backgroundImage:
            initialState?.settings?.navTheme === 'realDark'
              ? 'background-image: linear-gradient(75deg, #1A1B1F 0%, #191C1F 100%)'
              : 'background-image: linear-gradient(75deg, #FBFDFF 0%, #F5F7FF 100%)',
        }}
      >
        <div
          style={{
            backgroundPosition: '100% -30%',
            backgroundRepeat: 'no-repeat',
            backgroundSize: '274px auto',
            backgroundImage:
              "url('https://gw.alipayobjects.com/mdn/rms_a9745b/afts/img/A*BuFmQqsB2iAAAAAAAAAAAAAAARQnAQ')",
          }}
        >
          <div
            style={{
              fontSize: '20px',
              color: token.colorTextHeading,
            }}
          >
            欢迎使用 校园外卖点餐
          </div>
          <p
            style={{
              fontSize: '14px',
              color: token.colorTextSecondary,
              lineHeight: '22px',
              marginTop: 16,
              marginBottom: 32,
              width: '65%',
            }}
          >
            您的一站式美食生活管家！平台汇聚全城万家优质餐厅，覆盖中西餐、甜品饮品、生鲜果蔬等全品类美食，24小时随时下单。会员专享免配送费特权。，实时追踪配送进度，超时必赔！更有环保包装、食品安全险双重保障，让您吃得省心又放心。开启美味极速体验！
          </p>
          <div
            style={{
              display: 'flex',
              flexWrap: 'wrap',
              gap: 16,
            }}
          >
            <img src="/data/menusPhoto/baicai.jpg" alt="图片1" style={{width: '150px', height: '150px'}}/>
            <img src="/data/menusPhoto/bjikaoya.jpg" alt="图片2" style={{width: '150px', height: '150px'}}/>
            <img src="/data/menusPhoto/eeee.jpg" alt="图片3" style={{width: '150px', height: '150px'}}/>
            <img src="/data/menusPhoto/hmj.jpg" alt="图片4" style={{width: '150px', height: '150px'}}/>
            <img src="/data/menusPhoto/hsr.jpg" alt="图片5" style={{width: '150px', height: '150px'}}/>
            <img src="/data/menusPhoto/nouroumian.jpg" alt="图片6" style={{width: '150px', height: '150px'}}/>
            <img src="/data/menusPhoto/shuizhujir.jpg" alt="图片7" style={{width: '150px', height: '150px'}}/>
            <img src="/data/menusPhoto/taianyu.jpg" alt="图片8" style={{width: '150px', height: '150px'}}/>
            <img src="/data/menusPhoto/xhs.jpg" alt="图片9" style={{width: '150px', height: '150px'}}/>
            <img src="/data/menusPhoto/yuxiang.jpg" alt="图片10" style={{width: '150px', height: '150px'}}/>
            <img src="/data/menusPhoto/img.png" alt="图片10" style={{width: '150px', height: '150px'}}/>
            <img src="/data/menusPhoto/img_1.png" alt="图片10" style={{width: '150px', height: '150px'}}/>
          </div>
        </div>
      </Card>
    </PageContainer>
  );
};

export default Welcome;
